<script setup>
import { ref } from "vue"
const props = defineProps({
    messageList: {
        type: Array,
        default: () => []
    },
    viewData: {
        type: Object,
        default: () => {}
    }
})
const emit = defineEmits(['changeView'])

const img = ref(props.viewData.imgurl)
const index = ref(props.messageList.findIndex(item => item.imgurl === img.value))

// 切换图片
const changePic = (type) => {
    index.value += type 
    img.value = props.messageList[index.value]?.imgurl
    emit('changeView', index.value)
}

</script>

<template>
    <div class="picture-view">
        <div class="picture-box">
            <img :src="img" alt="" />
        </div>
        <div class="picture-bg"></div>
        <div class="switch switch-left" v-show="index > 0" @click="changePic(-1)">
            <span class="iconfont icon-xiangzuo1"></span>
        </div>
        <div class="switch switch-right" v-show="index != messageList.length - 1" @click="changePic(1)">
            <span class="iconfont icon-xiangyou1"></span>
        </div>
    </div>
</template>

<style lang="less" scoped>
.picture-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    padding: 72px 448px 0 88px;
    overflow-y: auto;

    .picture-bg {
        position: fixed;
        top: 0;
        left: 0;
        background: hsla(0, 0%, 100%, .8);
        backdrop-filter: blur(20px);
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    .picture-box {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
            width: 80%;
            object-fit: fit;
        }
    }
    .switch {
        position: fixed;
        top: 0;
        bottom: 0;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: #949494;
        color: #fff;
        text-align: center;
        transition: all .3s;
        opacity: .5;
        cursor: pointer;
        &:hover {
            opacity: 1;
        }
    }
    .switch-left {
        left: 20px;
    }
    .switch-right {
        right: 380px;
    }
}
</style>